<template>
	<van-tabs
    v-model="active"
    background="#f7f7f7"
    color="#07c160"
    class="emoji-container"
    ref="tabs"
  >
		<van-tab
      class="emoji-tab"
      v-for="(emojiGroup, category) in emojis"
      :title="nameMap[category]"
      :key="category"
    >
      <div
        class="emoji-wrapper"
        v-for="(emoji, emojiName) in emojiGroup"
        :key="emojiName"
        @click="$emit('emoji-select',emoji)"
      >
        <span class="">{{emoji}}</span>
      </div>
		</van-tab>
  </van-tabs>
</template>

<script>
import emojis from './emojis'
export default {
  name: 'Emoji',
  props: {},
  data() {
    return {
      active: 0,
      emojis,
      nameMap: {
        'Frequently used': '常用',
        People: '人类',
        Nature: '自然',
        Objects: '物体',
        Places: '场景',
        Symbols: '符号'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.emoji-container{
  .emoji-tab{
    background-color: $gray-2;
    // padding: $padding-side 12.5px;
    font-size: 25px;
    display: flex;
    flex-flow: row wrap;
    height: 240px;
    overflow: auto;
    .emoji-wrapper{
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      // outline: 1px solid red;
      margin-left: 6px;
      &:active{
        background-color: $gray-5;
      }
    }
  }
}

</style>
